<template>
	<view class="main">
		<image src="https://ydh5res.onlineweixin.com/cy/prop_files/bg.png" alt="" class="mainBg"
			style="pointer-events: none;"></image>
		<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/title.png?v=1" alt="" class="title"></image>
		<view class="content">
			<image src="https://ydh5res.onlineweixin.com/cy/prop_files/box.png" alt="" class="contentBg"
				style="pointer-events: none;"></image>

			<view class="contentMain">
				<view class="progress-wrap">
					<view class="progress-title">{{ text[textIndex] }}</view>
					<view class="progress-bar">
						<text class="pao" :style="{width: pao+'%'}"></text>
					</view>
				</view>

				<view v-if="page1" class="tableBox">
					<view class="tableRow">
						<view class="th">
							<view class="tableItem " v-show="page1List[5].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[5].first}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[5].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/5.png" alt=""
									class="tableItemZodiac " :class="{'active':page1List[5].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/5x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[5].third}"></image>
								<view class="tableItemTxt ">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg" :class="{'active':page1List[5].first}"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[5].third"></image>
									<view class="tableItemTxtTxt" :class="{'active':page1List[5].first}">巨蟹</view>
								</view>
								<view class="tableItemTxt active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg" :class="{'active':page1List[5].second}"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[5].third"></image>
									<view class="tableItemTxtTxt" :class="{'active':page1List[5].first}">巳蛇</view>
								</view>
							</view>
						</view>
						<view class="th">
							<view class="tableItem " v-show="page1List[6].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[6].first}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[6].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/6.png" alt=""
									class="tableItemZodiac " :class="{'active':page1List[6].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/6x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[6].third}"></image>
								<view class="tableItemTxt ">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[6].third"></image>
									<view class="tableItemTxtTxt">狮子</view>
								</view>
								<view class="tableItemTxt active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[6].third"></image>
									<view class="tableItemTxtTxt">午马</view>
								</view>
							</view>
						</view>
						<view class="th">
							<view class="tableItem " v-show="page1List[7].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[7].first}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[7].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/7.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[7].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/7x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[7].third}"></image>
								<view class="tableItemTxt ">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[7].third"></image>
									<view class="tableItemTxtTxt">处女</view>
								</view>
								<view class="tableItemTxt active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[7].third"></image>
									<view class="tableItemTxtTxt">未羊</view>
								</view>
							</view>
						</view>
						<view class="th">
							<view class="tableItem " v-show="page1List[8].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[8].first}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[8].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/8.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[8].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/8x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[8].third}"></image>
								<view class="tableItemTxt ">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[8].third"></image>
									<view class="tableItemTxtTxt">天蝎</view>
								</view>
								<view class="tableItemTxt active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[8].third"></image>
									<view class="tableItemTxtTxt">申猴</view>
								</view>
							</view>
						</view>
					</view>
					<view class="tableRow">
						<view class="th">
							<view class="tableItem " v-show="page1List[4].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[4].first}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[4].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/4.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[4].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/4x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[4].third}"></image>
								<view class="tableItemTxt ">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[4].third"></image>
									<view class="tableItemTxtTxt">双子</view>
								</view>
								<view class="tableItemTxt active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[4].third"></image>
									<view class="tableItemTxtTxt">辰龙</view>
								</view>
							</view>
						</view>
						<view class="th">
							<view class="tableItem " v-show="page1List[9].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[9].first}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[9].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/9.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[9].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/9x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[9].third}"></image>
								<view class="tableItemTxt  ">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[9].third"></image>
									<view class="tableItemTxtTxt">天蝎</view>
								</view>
								<view class="tableItemTxt  active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[9].third"></image>
									<view class="tableItemTxtTxt">酉鸡</view>
								</view>
							</view>
						</view>
					</view>
					<view class="tableRow">
						<view class="th">
							<view class="tableItem " v-show="page1List[3].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[3].first}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[3].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/3.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[3].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/3x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[3].third}"></image>
								<view class="tableItemTxt ">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[3].third"></image>
									<view class="tableItemTxtTxt">金牛</view>
								</view>
								<view class="tableItemTxt active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[3].third"></image>
									<view class="tableItemTxtTxt">卯兔</view>
								</view>
							</view>
						</view>
						<view class="th">
							<view class="tableItem " v-show="page1List[10].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[10].first}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[10].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/10.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[10].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/10x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[10].third}"></image>
								<view class="tableItemTxt ">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[10].third"></image>
									<view class="tableItemTxtTxt">射手</view>
								</view>
								<view class="tableItemTxt active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[10].third"></image>
									<view class="tableItemTxtTxt">戌狗</view>
								</view>
							</view>
						</view>
					</view>
					<view class="tableRow">
						<view class="th">
							<view class="tableItem " v-show="page1List[2].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[2].first}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[2].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/2.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[2].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/2x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[2].third}"></image>
								<view class="tableItemTxt ">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[2].third"></image>
									<view class="tableItemTxtTxt">白羊</view>
								</view>
								<view class="tableItemTxt active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[2].third"></image>
									<view class="tableItemTxtTxt">寅虎</view>
								</view>
							</view>
						</view>
						<view class="th">
							<view class="tableItem " v-show="page1List[1].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[1].first}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[1].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/1.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[1].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/1x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[1].third}"></image>
								<view class="tableItemTxt start14">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[1].third"></image>
									<view class="tableItemTxtTxt">双鱼</view>
								</view>
								<view class="tableItemTxt active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[1].third"></image>
									<view class="tableItemTxtTxt">丑牛</view>
								</view>
							</view>
						</view>
						<view class="th">
							<view class="tableItem " v-show="page1List[0].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[0].first}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[0].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/0.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[0].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/0x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[0].third}"></image>
								<view class="tableItemTxt ">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[0].third"></image>
									<view class="tableItemTxtTxt">水瓶</view>
								</view>
								<view class="tableItemTxt active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[0].third"></image>
									<view class="tableItemTxtTxt">子鼠</view>
								</view>
							</view>
						</view>
						<view class="th">
							<view class="tableItem " v-show="page1List[11].first">
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg2.png" alt=""
									class="tableItemBg" :class="{'active':page1List[11].first && !page1List[11].third}">
								</image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/bg1.png" alt=""
									class="tableItemBg" :class="{'active':page1List[11].third}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/11.png" alt=""
									class="tableItemZodiac " :class="{'active':page1List[11].second}"></image>
								<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/11x.png" alt=""
									class="tableItemZodiac" :class="{'active':page1List[11].third}"></image>
								<view class="tableItemTxt ">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg" v-if="!page1List[11].third"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[11].third"></image>
									<view class="tableItemTxtTxt">摩羯</view>
								</view>
								<view class="tableItemTxt active">
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt2.png" alt=""
										class="tableItemTxtBg" v-if="!page1List[11].third"></image>
									<image src="https://ydh5res.onlineweixin.com/cy/prop_files/txt1.png" alt=""
										class="tableItemTxtBg" v-if="page1List[11].third"></image>
									<view class="tableItemTxtTxt">亥猪</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="page2" class="tableCenter">
					<view class="tableCenterTxt" :class="{'active':page2List[0] }">
						<text>姓名：</text>
						{{ name }}
					</view>
					<view class="tableCenterTxt" :class="{'active':page2List[1] }">
						<text>性别：</text>
						{{ sex == 1?'男':'女' }}
					</view>
					<view class="tableCenterTxt" :class="{'active':page2List[2] }">
						<text>生日：</text>
						阳历
						{{ birthday.yy }}年{{ birthday.mm }}月{{ birthday.dd }}日 {{ birthday.hh }}时
					</view>
				</view>

				<view v-if="page3" class="info2 info8">
					<view class="zs"></view>
					<view class="item" :class="{'active':page3List[0]}">
						<view class="tit">年</view>
						<view class="inf">
							<view>幻</view>
							<view>猪</view>
						</view>
					</view>
					<view class="item " :class="{'active':page3List[1]}">
						<view class="tit">月</view>
						<view class="inf">
							<view>幻</view>
							<view>鸡</view>
						</view>
					</view>
					<view class="item " :class="{'active':page3List[2]}">
						<view class="tit">日</view>
						<view class="inf">
							<view>幻</view>
							<view>牛</view>
						</view>
					</view>
					<view class="item " :class="{'active':page3List[3]}">
						<view class="tit">时</view>
						<view class="inf">
							<view>伤</view>
							<view>龙</view>
						</view>
					</view>
				</view>
				<view v-if="page4" class="info2 info4">
					<view class="zs"></view>
					<view class="item item12" :class="{'active':page4List[0]}">
						<view class="tit">幻</view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
					<view class="item item13" :class="{'active':page4List[1]}">
						<view class="tit">幻</view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
					<view class="item item14" :class="{'active':page4List[2]}">
						<view class="tit">幻</view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
					<view class="item item15" :class="{'active':page4List[3]}">
						<view class="tit">伤</view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
				</view>
				<view v-if="page5" class="info2 info4">
					<view class="zs"></view>
					<view class="item item12" :class="{'active':page5List[0]}">
						<view class="tit">猪</view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
					<view class="item item13" :class="{'active':page5List[1]}">
						<view class="tit">鸡</view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
					<view class="item item14" :class="{'active':page5List[2]}">
						<view class="tit">牛</view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
					<view class="item item15" :class="{'active':page5List[3]}">
						<view class="tit">龙</view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
				</view>

				<view v-if="page6" class="info2 info5">
					<view class="zs"></view>
					<view class="item item16" :class="{'active':page6List[3]}">
						<view class="tit"></view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
					<view class="item item17" :class="{'active':page6List[3]}">
						<view class="tit"></view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
					<view class="item item18" :class="{'active':page6List[3]}">
						<view class="tit"></view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
					<view class="item item19" :class="{'active':page6List[3]}">
						<view class="tit"></view>
						<view class="inf">
							<view></view>
							<view></view>
						</view>
					</view>
				</view>

				<view v-if="page7" class="info1 info6">
					<view class="item item20" :class="{'active':page7List[0]}">
						<view class="key">主情绪：</view>
					</view>
					<view class="item item21" :class="{'active':page7List[1]}">
						<view class="key"><span>易现内色： 惊</span></view>
					</view>
				</view>

				<view v-if="page8" class="info0 info7">
					<view class="item item22" :class="{'active':page8List[0]}">
						<view class="key" style="text-align: left; padding-left: 0.2rpx;">发展格局的建议已经完善
						</view>
					</view>
					<view class="item item23" :class="{'active':page8List[1]}">
						<view class="key" style="text-align: left; padding-left: 0.2rpx;">所有结果分析完毕
						</view>
					</view>
				</view>

				<view v-if="page9" class="rotate">
					<image src="https://ydh5res.onlineweixin.com/cy/prop_files/waibg.png" alt="" class="waibg"
						style="pointer-events: none;"></image>
					<image src="https://ydh5res.onlineweixin.com/cy/prop_files/waichoose.png" alt=""
						:class="{'active':tgchoose}" class="dzchoose" style="pointer-events: none; "></image>
					<view class="dz" :style="{transform: 'rotate('+xuanzhuan1+'deg)'}"
						:class="{'active':xuanzhuanState1}">
						<view style="transform: rotate(0deg);">鼠</view>
						<view style="transform: rotate(30deg);">牛</view>
						<view style="transform: rotate(60deg);">虎</view>
						<view style="transform: rotate(90deg);">兔</view>
						<view style="transform: rotate(120deg);">龙</view>
						<view style="transform: rotate(150deg);">蛇</view>
						<view style="transform: rotate(180deg);">马</view>
						<view style="transform: rotate(210deg);">羊</view>
						<view style="transform: rotate(240deg);">猴</view>
						<view style="transform: rotate(270deg);">鸡</view>
						<view style="transform: rotate(300deg);">戌</view>
						<view style="transform: rotate(330deg);">猪</view>
					</view>
					<image src="https://ydh5res.onlineweixin.com/cy/prop_files/zhongbg.png" alt="" class="cenbg">
					</image>
					<image src="https://ydh5res.onlineweixin.com/cy/prop_files/zhongchoose.png" alt="" class="tgchoose"
						:class="{'active':dzchoose}"></image>
					<view class="tg" :style="{transform: 'rotate('+xuanzhuan2+'deg)'}"
						:class="{'active':xuanzhuanState2}">
						<view style="transform: rotate(0deg);">喜</view>
						<view style="transform: rotate(36deg);">幻</view>
						<view style="transform: rotate(72deg);">哀</view>
						<view style="transform: rotate(108deg);">乐</view>
						<view style="transform: rotate(144deg);">狗</view>
						<view style="transform: rotate(180deg);">恐</view>
						<view style="transform: rotate(216deg);">伤</view>
						<view style="transform: rotate(252deg);">爱</view>
						<view style="transform: rotate(288deg);">惊</view>
						<view style="transform: rotate(324deg);">羞</view>
					</view>
					<image src="https://ydh5res.onlineweixin.com/cy/prop_files/neibg.png" alt="" class="neibg"></image>
					<view class="nyr">
						<view style="transform: rotate(0deg);">年</view>
						<view style="transform: rotate(90deg);">月</view>
						<view style="transform: rotate(180deg);">日</view>
						<view style="transform: rotate(270deg);">时</view>
					</view>
					<image src="https://ydh5res.onlineweixin.com/cy2/prop_files/xing2.png" alt="" class="xin"></image>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		toPage
	} from "../../tools";

	export default {
		data() {
			return {
				timerInterval1: null,
				start1Timer: null,
				start2Timer: null,
				start3Timer: null,
				start4Timer: null,
				start5Timer: null,
				start6Timer: null,
				start7Timer: null,
				start8Timer: null,
				name: '',
				sex: '',
				birthday: '',
				zodiac: '',
				zodiacNumber: 0,
				animationData: {
					bazi: [],
					tiangan: [],
					shishen: [],
					dizhi: [],
					dizhi_shishen: [],
					zanggan: [],
					zanggan_shishen: [],
				},


				page1: false,
				page2: false,
				page3: false,
				page4: false,
				page5: false,
				page6: false,
				page7: false,
				page8: false,
				page9: false,

				text: ['正在录入你的基本信息...', '正在录入你的基本信息...', '正在生成适合你的人生建议...', '正在生成适合你的情感建议...', '正在生成适合你的事业建议...',
					'正在生成适合你的健康建议...', '正在录入生成你的最终报告结果...', '正在录入生成你的最终报告结果...'
				],
				textIndex: 0,
				pao: 0,
				active1: false,
				active2: false,
				active3: false,
				active4: false,
				active5: false,
				active6: false,
				active7: false,



				page1List: [{
						first: false,
						second: false,
						third: false
					},
					{
						first: false,
						second: false,
						third: false
					},
					{
						first: false,
						second: false,
						third: false
					},
					{
						first: false,
						second: false,
						third: false
					},
					{
						first: false,
						second: false,
						third: false
					},
					{
						first: false,
						second: false,
						third: false
					},
					{
						first: false,
						second: false,
						third: false
					},
					{
						first: false,
						second: false,
						third: false
					},
					{
						first: false,
						second: false,
						third: false
					},
					{
						first: false,
						second: false,
						third: false
					},
					{
						first: false,
						second: false,
						third: false
					},
					{
						first: false,
						second: false,
						third: false
					}
				],
				page2List: [
					false,
					false,
					false
				],
				page3List: [
					false, false, false, false,
				],
				page4List: [
					false, false, false, false,
				],
				page5List: [
					false, false, false, false,
				],
				page6List: [
					false, false, false, false,
				],
				page7List: [
					false, false
				],
				page8List: [
					false, false
				],

				tgchoose: false,
				dzchoose: false,

				dz: [{
						ind: 1,
						val: '鼠'
					},
					{
						ind: 2,
						val: '牛'
					},
					{
						ind: 3,
						val: '虎'
					},
					{
						ind: 4,
						val: '兔'
					},
					{
						ind: 5,
						val: '龙'
					},
					{
						ind: 6,
						val: '蛇'
					},
					{
						ind: 7,
						val: '马'
					},
					{
						ind: 8,
						val: '羊'
					},
					{
						ind: 9,
						val: '猴'
					},
					{
						ind: 10,
						val: '鸡'
					},
					{
						ind: 11,
						val: '狗'
					},
					{
						ind: 12,
						val: '猪'
					},
				],
				tg: [{
						ind: 1,
						val: '喜'
					},
					{
						ind: 2,
						val: '幻'
					},
					{
						ind: 3,
						val: '哀'
					},
					{
						ind: 4,
						val: '乐'
					},
					{
						ind: 5,
						val: '恐'
					},
					{
						ind: 6,
						val: '悲'
					},
					{
						ind: 7,
						val: '伤'
					},
					{
						ind: 8,
						val: '爱'
					},
					{
						ind: 9,
						val: '惊'
					},
					{
						ind: 10,
						val: '羞'
					},
				],
				zi: ['龙乐', '牛伤', '鸡惊', '蛇爱'],

				xuanzhuan1: {},
				xuanzhuan2: {},
				xuanzhuanState1: true,
				xuanzhuanState2: true,
			};
		},
		onLoad(options) {
			this.birthday = JSON.parse(options.birthday);
			this.name = options.username
			this.zodiac = options.zodiac
			this.oid = options.oid
			console.log('oid', this.oid)
			this.sex = Number(options.gender)

			let ret = JSON.parse('{"result":{"username":"天空","sex":"' + (this.sex === 1 ? 1 : 0) + '","zodiac":"' + this
				.zodiac +
				'","birthday":["1995年10月01日 7时","1995年闰八月初七 龙时"],"bazi":["幻","猪","幻","鸡","幻","牛","伤","龙"],"wuxing":["悲","乐","悲","喜","悲","惊","喜","惊"],' +
				'"siji":"","wx_que":["土"],"wx_wang":["水"],"wx_num":["23.08","38.46","23.08","0.00","15.38"],"wxwd":["\u91d1","\u6c34","\u571f","\u706b","\u6728"],"dizhi":["猪","鸡","牛","龙"],"tiangan":["幻","幻","幻","伤"],"xiyongshen":"\u706b","shishen":["\u6bd4\u80a9","\u6bd4\u80a9","\u65e5\u5143","\u6b63\u5b98"],"dizhi_shishen":["\u504f\u5370","\u6bd4\u80a9","\u6b63\u5b98","\u6bd4\u80a9"],"nayin":[{"jiazi":"\u4e59\u4ea5","layin":"\u5c71\u5934\u706b"},{"jiazi":"\u4e59\u9149","layin":"\u4e95\u6cc9\u6c34"},{"jiazi":"\u4e59\u4e11","layin":"\u6d77\u4e2d\u91d1"},{"jiazi":"\u5e9a\u8fb0","layin":"\u767d\u814a\u91d1"}],"zanggan":[["\u58ec","\u7532",""],["\u8f9b","",""],["\u7678","\u5df1","\u8f9b"],["\u4e59","\u620a","\u7678"]],"zanggan_shishen":[["\u6b63\u5370","\u52ab\u8d22",""],["\u504f\u5b98","",""],["\u504f\u5370","\u504f\u8d22","\u504f\u5b98"],["\u6bd4\u80a9","\u6b63\u8d22","\u504f\u5370"]],"pattern":"\u504f\u5b98","dayun":{"year":"","month":""},"dayun_time":["\u7532\u7533","\u7678\u672a","\u58ec\u5348","\u8f9b\u5df3","\u5e9a\u8fb0","\u5df1\u536f","\u620a\u5bc5"],"datetype":null}}'
			);
			let rea = ret.result;
			this.animationData = rea;
			this.zi = [
				this.animationData.dizhi[0] + this.animationData.tiangan[0],
				this.animationData.dizhi[1] + this.animationData.tiangan[1],
				this.animationData.dizhi[2] + this.animationData.tiangan[2],
				this.animationData.dizhi[3] + this.animationData.tiangan[3]
			];
			this.analyse(options.zodiac)
		},
		onShow() {
			this.start()

		},
		onHide() {
			// clearInterval(this.timerInterval1)
			// clearTimeout(this.start8Timer)
			// clearTimeout(this.start6Timer)
			// clearTimeout(this.start5Timer)
			// clearTimeout(this.start4Timer)
			// clearTimeout(this.start3Timer)
			// clearTimeout(this.start2Timer)
			// this.timerInterval1 = null
			// this.start8Timer = null
			// this.start7Timer = null
			// this.start6Timer = null
			// this.start5Timer = null
			// this.start4Timer = null
			// this.start3Timer = null
			if (this.timerInterval1) {
				clearInterval(this.timerInterval1)
			}
			if (this.start8Timer) {
				clearTimeout(this.start8Timer)
			}
			if (this.start6Timer) {
				clearTimeout(this.start6Timer)
			}
			if (this.start5Timer) {
				clearTimeout(this.start5Timer)
			}
			if (this.start4Timer) {
				clearTimeout(this.start4Timer)
			}
			if (this.start3Timer) {
				clearTimeout(this.start3Timer)
			}
			if (this.start2Timer) {
				clearTimeout(this.start2Timer)
			}
		},
		onUnload() {
			if (this.timerInterval1) {
				clearInterval(this.timerInterval1)
			}
			if (this.start8Timer) {
				clearTimeout(this.start8Timer)
			}
			if (this.start6Timer) {
				clearTimeout(this.start6Timer)
			}
			if (this.start5Timer) {
				clearTimeout(this.start5Timer)
			}
			if (this.start4Timer) {
				clearTimeout(this.start4Timer)
			}
			if (this.start3Timer) {
				clearTimeout(this.start3Timer)
			}
			if (this.start2Timer) {
				clearTimeout(this.start2Timer)
			}

		},
		methods: {
			start() {
				this.textIndex = 0
				this.page2 = true
				this.paoNum(37000)
				this.start1Timer = setTimeout(() => {
					this.$set(this.page2List, 0, true)
				}, 100)
				this.start1Timer = setTimeout(() => {
					this.$set(this.page2List, 1, true)
				}, 500)
				this.start1Timer = setTimeout(() => {
					this.$set(this.page2List, 2, true)
				}, 1000)
				this.page1 = true
				let _num = 0
				this.timerInterval1 = setInterval(() => {
					if (_num > 11) {
						clearInterval(this.timerInterval1)
						this.start1()
					}
					this.$set(this.page1List, _num, {
						first: true,
						second: false,
						third: false
					}, )
					_num++
				}, 100)
				this.page1 = true
			},
			start1() {
				let _num = 0
				let _timer = setInterval(() => {
					if (_num > 11) {
						clearInterval(_timer)
					}
					this.$set(this.page1List, _num, {
						first: true,
						second: true,
						third: false
					})
					_num++
				}, 150)
				setTimeout(() => {
					this.$set(this.page1List, (this.zodiacNumber - 1), {
						first: true,
						second: false,
						third: true
					})
				}, 1800)
				this.start2Timer = setTimeout(() => {
					this.page1 = false
					this.page2 = false
					this.page3 = true
					this.page9 = true
					this.textIndex = 1
					this.paoNum(80000)
					this.rotate()
				}, 2500)
			},

			rotate() {

				let _this = this;
				_this.xuanzi(_this.zi[0][0], _this.zi[0][1]);
				setTimeout(() => {
					_this.showchoose(true);
					this.$set(this.page3List, 0, true)
				}, 1000)

				setTimeout(() => {
					_this.xuanzi(_this.zi[1][0], _this.zi[1][1]);
					setTimeout(() => {
						_this.showchoose(true);
						this.$set(this.page3List, 1, true)
					}, 1000);
				}, 2000);

				setTimeout(() => {
					_this.xuanzi(_this.zi[2][0], _this.zi[2][1]);
					setTimeout(() => {
						_this.showchoose(true);
						this.$set(this.page3List, 2, true)
					}, 1000);
				}, 4000);

				setTimeout(() => {
					_this.xuanzi(_this.zi[3][0], _this.zi[3][1]);
					setTimeout(() => {
						_this.showchoose(false);
						this.$set(this.page3List, 3, true)
					}, 1000);
				}, 6000);


			},
			showchoose(state) {
				this.tgchoose = true
				this.dzchoose = true
				this.xuanzhuanState1 = false
				this.xuanzhuanState2 = false
				this.start3Timer = setTimeout(() => {
					this.tgchoose = false
					this.dzchoose = false
					if (!state) {
						this.xuanzhuanState1 = true
						this.xuanzhuanState2 = true
						this.page4 = true
						this.page3 = false
						this.textIndex++
						this.start4()
					}

				}, 500);
			},

			xuanzi(val1, val2) {
				let index1 = this.dz.findIndex((item) => {
					return item.val == val1;
				})
				let index2 = this.tg.findIndex((item) => {
					return item.val == val2;
				})
				let zhuan1 = (this.dz[index1].ind - 1) * 30;
				let zhuan2 = 360 - (this.tg[index2].ind - 1) * 36;
				this.xuanzhuan1 = -Number(zhuan1 + 720)
				this.xuanzhuan2 = Number(zhuan2 + 720)
				return index1
			},

			analyse(e) {
				if (e == '鼠') {
					this.zodiacNumber = 1;
				} else if (e == '牛') {
					this.zodiacNumber = 2;
				} else if (e == '虎') {
					this.zodiacNumber = 3;
				} else if (e == '兔') {
					this.zodiacNumber = 4;
				} else if (e == '龙') {
					this.zodiacNumber = 5;
				} else if (e == '蛇') {
					this.zodiacNumber = 6;
				} else if (e == '马') {
					this.zodiacNumber = 7;
				} else if (e == '羊') {
					this.zodiacNumber = 8;
				} else if (e == '猴') {
					this.zodiacNumber = 9;
				} else if (e == '鸡') {
					this.zodiacNumber = 10;
				} else if (e == '狗') {
					this.zodiacNumber = 11;
				} else if (e == '猪') {
					this.zodiacNumber = 12;
				}

			},

			paoNum(num) {
				this.pao = 0
				let _timer = setInterval(() => {
					this.pao++
					if (this.pao >= 100) {
						clearInterval(_timer)

					}
				}, num / 1000)
			},

			start4() {
				this.paoNum(30000)
				setTimeout(() => {
					this.$set(this.page4List, 0, true)
				}, 500)
				setTimeout(() => {
					this.$set(this.page4List, 1, true)
				}, 1000)
				setTimeout(() => {
					this.$set(this.page4List, 2, true)
				}, 1500)
				this.start3Timer = setTimeout(() => {
					this.$set(this.page4List, 3, true)
					setTimeout(() => {
						this.page5 = true
						this.page4 = false
						this.textIndex++
						this.start5()
					}, 600)
				}, 2000)
			},
			start5() {
				this.paoNum(20000)
				setTimeout(() => {
					this.$set(this.page5List, 0, true)
				}, 500)
				setTimeout(() => {
					this.$set(this.page5List, 1, true)
				}, 1000)
				setTimeout(() => {
					this.$set(this.page5List, 2, true)
				}, 1500)
				this.start4Timer = setTimeout(() => {
					this.$set(this.page5List, 3, true)
					setTimeout(() => {
						this.page6 = true
						this.page5 = false
						this.textIndex++
						this.start6()
					}, 600)
				}, 2000)
			},

			start6() {
				this.paoNum(35000)
				setTimeout(() => {
					this.$set(this.page6List, 0, true)
				}, 500)
				setTimeout(() => {
					this.$set(this.page6List, 1, true)
				}, 1000)
				setTimeout(() => {
					this.$set(this.page6List, 2, true)
				}, 1500)
				this.start5Timer = setTimeout(() => {
					this.$set(this.page6List, 3, true)
					setTimeout(() => {
						this.page7 = true
						this.page6 = false
						this.textIndex++
						this.start7()
					}, 600)
				}, 2000)
			},

			start7() {
				this.paoNum(30000)
				setTimeout(() => {
					this.$set(this.page7List, 0, true)
				}, 500)
				this.start6Timer = setTimeout(() => {
					this.$set(this.page7List, 1, true)
					setTimeout(() => {
						this.page8 = true
						this.page7 = false
						this.textIndex++
						this.start8()
					}, 600)
				}, 1000)

			},

			start8() {
				this.paoNum(30000)
				setTimeout(() => {
					this.$set(this.page8List, 0, true)
				}, 500)
				this.start8Timer = setTimeout(() => {
					this.$set(this.page8List, 1, true)
					console.log(this.oid)
					setTimeout(() => {
						toPage(`/pages/order/order?oid=${this.oid}`, 1)
					}, 1000)
				}, 1000)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 750rpx;
		height: 100vh;
		overflow: hidden;
		position: relative;

		.mainBg {
			width: 750rpx;
			height: 1146rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.title {
			width: 516rpx;
			height: 83rpx;
			position: absolute;
			top: 50rpx;
			left: 117rpx;
		}

		.content {
			width: 690rpx;
			height: 865rpx;
			position: absolute;
			top: 170rpx;
			left: 30rpx;

			.contentBg {
				width: 690rpx;
				height: 865rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.contentMain {
				width: 690rpx;
				height: 865rpx;
				position: absolute;
				top: 0;
				left: 0;

				.progress-wrap {
					width: 690rpx;
					margin-left: 36rpx;
					margin-top: 30rpx;

					.progress-title {
						font-size: 34rpx;
						color: #ffffff;
					}

					.progress-bar {
						width: 614rpx;
						height: 20rpx;
						background-color: #4f87bb;
						border-radius: 10rpx;
						margin-top: 40rpx;

						text {
							height: 20rpx;
							background-color: #ffc962;
							border-radius: 10rpx;
							display: block;
							width: 0;
						}
					}
				}

				.tableBox {
					width: 660rpx;
					height: 660rpx;
					margin-left: 18rpx;
					margin-top: 34rpx;

					.tableRow {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 20rpx;

						.th {
							width: 151rpx;
							height: 151rpx;
							position: relative;

							.tableItem {
								width: 151rpx;
								height: 151rpx;
								position: relative;

								.tableItemBg {
									width: 151rpx;
									height: 151rpx;
									position: absolute;
									top: 0;
									left: 0;
									opacity: 0;
									transition: opacity .5s linear;

									&.active {
										opacity: 1;
									}
								}

								.tableItemZodiac {
									position: absolute;
									top: 10rpx;
									left: 10rpx;
									width: 127rpx;
									height: 127rpx;
									opacity: 0;
									transition: opacity .5s linear;

									&.active {
										opacity: 1;
									}
								}

								.tableItemTxt {
									width: 63rpx;
									height: 36rpx;
									position: absolute;
									bottom: 0;
									left: 0;
									opacity: 1;

									&.active {
										display: block;
										top: 0;
										right: 0;
										left: unset;
									}

									.tableItemTxtBg {
										width: 63rpx;
										height: 36rpx;
										position: absolute;
										bottom: 0;
										left: 0;
									}

									.tableItemTxtTxt {
										width: 63rpx;
										height: 36rpx;
										position: absolute;
										bottom: 0;
										left: 0;
										text-align: center;
										line-height: 36rpx;
										font-size: 20rpx;
										color: #ffffff;
									}
								}
							}
						}
					}
				}

				.tableCenter {
					width: 260rpx;
					height: 260rpx;
					padding: 30rpx;
					position: absolute;
					top: 330rpx;
					left: 186rpx;
					background-color: #dde9f6;
					border-radius: 10rpx;
					border: solid 4rpx #68b2ee;

					.tableCenterTxt {
						width: 100%;
						font-size: 28rpx;
						color: #26639d;
						margin-bottom: 30rpx;
						line-height: 1.5;
						opacity: 0;
						transition: opacity 1s;

						&.active {
							opacity: 1;
						}

						text {
							font-weight: bold;
						}
					}
				}

				.info2 {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-around;
					text-align: center;
					position: absolute;
					top: 170rpx;
					left: 0;

					.zs {
						width: 100%;
						height: 80rpx;
						background-color: rgba(140, 191, 240, 0.5);
						position: absolute;
						top: 0;
						left: 0;
					}

					.item {
						width: 25%;
						opacity: 0;
						transition: opacity 0.5s;
						position: relative;
						z-index: 2;

						&.active {
							opacity: 1;
						}

						.tit {
							height: 80rpx;
							line-height: 80rpx;
							font-weight: 600;
							background-color: rgba(140, 191, 240, 0);
							color: #ffc962;
							font-size: 34rpx;
							margin-bottom: 30rpx;
						}

						.inf {
							color: #fefefe;
							font-size: 36rpx;

							view {
								padding-bottom: 10rpx;
							}
						}
					}
				}

				.info1 {
					position: absolute;
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-around;
					text-align: center;
					padding-top: 50rpx;

					.item {
						width: 40%;
						height: 56rpx;
						text-align: center;
						line-height: 56rpx;
						border-radius: 28rpx;
						border: solid 2rpx #65abeb;
						opacity: 0;
						transition: opacity 0.7s;

						&.active {
							opacity: 1;
						}

						.key {
							font-size: 34rpx;
							color: #ffffff;
							line-height: 56rpx;
						}
					}
				}

				.info0 {
					position: absolute;
					width: 100%;
					box-sizing: border-box;
					padding-top: 50rpx;

					.item {
						width: 90%;
						margin-left: 5%;
						height: 68rpx;
						text-align: center;
						line-height: 68rpx;
						border-radius: 28rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						border: solid 2rpx #65abeb;
						opacity: 0;
						transition: opacity 0.7s;
						margin-bottom: 30rpx;

						&.active {
							opacity: 1;
						}

						.key {
							font-size: 34rpx;
							color: #ffffff;
							line-height: 68rpx;
						}
					}
				}


				.rotate {
					position: absolute;
					width: 550rpx;
					height: 550rpx;
					left: 0;
					right: 0;
					margin: auto;
					top: 420rpx;

					.waibg {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 550rpx;
						height: 550rpx;
					}

					.dzchoose {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 550rpx;
						height: 550rpx;
						opacity: 0;
						transition: opacity 1s;

						&.active {
							opacity: 1;
						}
					}

					.cenbg {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 387rpx;
						height: 387rpx;
					}

					.tgchoose {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 387rpx;
						height: 387rpx;
						opacity: 0;
						transition: opacity 1s;

						&.active {
							opacity: 1;
						}
					}

					.neibg {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 233rpx;
						height: 233rpx;
					}

					.xin {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 110rpx;
						height: 110rpx;
						animation: zhuan 5s linear infinite;
					}

					>view {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;

						&.dz {
							width: 550rpx;
							height: 550rpx;
							transform: rotate(0deg);
							transition: transform 1s ease;

							&.active {
								animation: rotate1 1.5s linear infinite;
							}

							>view {
								position: absolute;
								font-size: 32rpx;
								width: 550rpx;
								height: 550rpx;
								box-sizing: border-box;
								padding-top: 27rpx;
								line-height: 40rpx;
								text-align: center;
								color: #c26811;
							}
						}

						&.tg {
							width: 387rpx;
							height: 387rpx;
							transform: rotate(0deg);
							transition: transform 1s ease;

							&.active {
								animation: rotate 1.5s linear infinite;
							}

							>view {
								width: 387rpx;
								height: 387rpx;
								position: absolute;
								font-size: 30rpx;
								box-sizing: border-box;
								padding-top: 23rpx;
								line-height: 40rpx;
								text-align: center;
								color: #ffedc3;
							}

						}

						&.nyr {
							width: 233rpx;
							height: 233rpx;
							transition: transform 1s;

							>view {
								position: absolute;
								font-size: 31rpx;
								width: 233rpx;
								height: 233rpx;
								box-sizing: border-box;
								padding-top: 18rpx;
								line-height: 40rpx;
								text-align: center;
								color: #ce3820;
							}
						}
					}


				}

			}

		}
	}
</style>